<template>
  <div>
    <div class="index_top">
      <div class="left">
        <div class="content">
          <div class="title">
            Dedicated to the design of LED lamp </div>
          <div class="brief">
            Founded in 1991 in Guangzhou, it has expanded in Dongguan, Hainan and other places. It has 6 large factories, more than 20,000 employees and 2 million square meters of modern factory buildings. The products are sold to more than 50 countries Founded in 1991 in Guangzhou, it has expanded in Dongguan, Hainan and other places. It has 6 large factories, more than 20,000 employees </div>
          <a
            class="btn"
            href="javascript:;"
            title="Dedicated to the design  of LED lamp"
          >
            <span class="btn_in">View all</span>
          </a>
        </div>
      </div>
      <div class="right i_video">
        <a
          class="img_a video_btn"
          href="javascript:;"
          video-url="https://qzonestyle.gtimg.cn/open/qcloud/video/flash/video_player.swf?swfv=beta1&amp;auto_play=0&amp;file_id=14651978969511250184&amp;app_id=1251369049&amp;version=1"
          title="Dedicated to the design  of LED lamp"
        >
          <img
            src="./img/44951dddeb.jpg"
            alt="Dedicated to the design  of LED lamp"
          />
        </a>
      </div>
      <div
        v-if="fun"
        class="vid"
      >
        <video
          class="vid"
          controls
          autoplay
          width="800"
          height="500"
        >
          <source
            src="/media/cc0-videos/flower.webm"
            type="video/webm"
          >
        </video>
        <a
          @click="cancel"
          href="javascript:;"
          class="close_btn middleImg"
        >
          <img
            src="./img/close_btn.png"
            alt=""
          >
        </a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
   data: () => ({
    fun: false
  }),
  methods: {
    play() {
      this.fun = !this.fun
    },
    cancel() {
      this.fun = false
    }
  }
}
</script>
<style lang="scss" scoped>
.index_top {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 120px 0;
  width: 1440px;
}
.index_top .left {
  display: flex;
  align-items: center;
  width: 53.4722%;
}
.index_top .left .content {
  width: 100%;
}
.index_top .left .content .title {
  width: 100%;
  line-height: 64px;
  height: 128px;
  font-size: 48px;
  color: #333;
  font-family: Poppins-Regular;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.index_top .left .content .brief {
  margin-top: 26px;
  width: 100%;
  line-height: 40px;
  font-size: 16px;
  color: #555;
}
.index_top .left .content .btn {
  display: block;
  margin-top: 86px;
  width: 195px;
  height: 50px;
  background: #fde628;
  text-align: center;
}
a {
  color: #333;
  text-decoration: none;
}
.index_top .right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38.6806%;
}
.index_top .right .img_a {
  display: block;
  position: relative;
  overflow: hidden;
}
.index_top .right .img_a:before {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 93px;
  height: 93px;
  border: 2px solid #fff;
  background: url(./img/play_icon.png) no-repeat center;
  z-index: 1;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.index_top .right .img_a img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
img {
  max-width: 100%;
  max-height: 100%;
  border: none;
}
@media screen and (max-width: 1460px) {
  .index_top {
    width: 95%;
  }
}
@media screen and (max-width: 850px) {
  .index_top {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 850px) {
  .index_top .left {
    width: 100%;
  }
}
@media screen and (max-width: 850px) {
  .index_top .left .content {
    margin-top: 50px;
    text-align: center;
  }
}
@media screen and (max-width: 850px) {
  .index_top .left .content .btn {
    margin: 30px auto 0;
  }
}
@media screen and (max-width: 850px) {
  .index_top .right {
    width: 100%;
  }
}
</style>